<template>
  <view class="lottery-container">
    <!-- 顶部标题区域 -->
    <view class="header">
      <text class="title">幸运大转盘</text>
      <text class="sub-title">每日3次抽奖机会 · 当前{{ prizes.length }}个奖项</text>
    </view>
    
    <!-- 轮盘主体区域 -->
    <view class="lottery-wrapper">
      <!-- 轮盘背景 -->
      <view class="wheel-bg"></view>
      
      <!-- 可旋转的轮盘 -->
      <view 
        class="lottery-wheel" 
        :style="{ 
          transform: `rotate(${rotateDeg}deg)`, 
          transition: isSpinning ? 'transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.95)' : 'none' 
        }"
      >
        <!-- 动态生成奖品区域 -->
        <view 
          class="lottery-item" 
          v-for="(prize, index) in prizes" 
          :key="index"
          :style="{ 
            transform: `rotate(${360 / prizes.length * index}deg)`,
            background: prize.color 
          }"
        >
          <!-- 分隔线 -->
          <view class="item-splitter"></view>
          
          <!-- 奖品内容 -->
          <view class="prize-content" :style="{ 
            transform: `rotate(${-360 / prizes.length * index}deg)`,
            height: `${50 - prizes.length * 0.8}%`  // 动态调整高度
          }">
            <!-- 支持不同图片 -->
            <image 
              :src="prize.imgUrl" 
              mode="aspectFit" 
              class="prize-img"
              :style="{ 
                width: `${80 - prizes.length}rpx`,
                height: `${80 - prizes.length}rpx`
              }"
            ></image>
            <text class="prize-name">{{ prize.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 中心指针 -->
      <view class="pointer-wrapper" @click="startLottery" :disabled="!canDraw">
        <view class="pointer" :class="{ shaking: canDraw }"></view>
      </view>
    </view>
    
    <!-- 抽奖控制区 -->
    <view class="lottery-controls">
      <view class="draw-count">
        <text>剩余次数：</text>
        <text class="count">{{ drawCount }}</text>
      </view>
      
      <button 
        class="add-btn" 
        @click="addPrize"
      >
        添加奖项
      </button>
    </view>
    
    <!-- 抽奖结果弹窗 -->
    <view class="result-modal" v-if="showResult">
      <view class="modal-content">
        <image :src="currentPrize.imgUrl" mode="aspectFit" class="result-img"></image>
        <text class="result-title">{{ currentPrize.name }}</text>
        <button class="confirm-btn" @click="closeResult">确定</button>
      </view>
    </view>
    <view class="mask" v-if="showResult" @click="closeResult"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rotateDeg: 0,
      isSpinning: false,
      drawCount: 3,
      // 初始奖品列表，可任意增减
      prizes: [
        {
          name: "10元红包",
          imgUrl: "/static/images/red10.png",
          color: "#FF6B6B"
        },
        {
          name: "20元红包",
          imgUrl: "/static/images/red20.png",
          color: "#FF8E71"
        },
        {
          name: "50元红包",
          imgUrl: "/static/images/red50.png",
          color: "#FFD166"
        },
        {
          name: "100元红包",
          imgUrl: "/static/images/red100.png",
          color: "#118AB2"
        },
        {
          name: "谢谢参与",
          imgUrl: "/static/images/thanks.png",
          color: "#4ECDC4"
        }
      ],
      currentPrize: {},
      showResult: false
    };
  },
  computed: {
    canDraw() {
      return this.drawCount > 0 && !this.isSpinning;
    }
  },
  methods: {
    // 开始抽奖
    startLottery() {
      if (!this.canDraw) {
        uni.showToast({ title: "无法抽奖", icon: "none" });
        return;
      }
      
      this.drawCount--;
      this.isSpinning = true;
      
      // 随机选择中奖索引
      const winningIndex = Math.floor(Math.random() * this.prizes.length);
      
      // 计算旋转角度（确保平均分配）
      const itemDeg = 360 / this.prizes.length;
      const baseDeg = 360 * 5 + (this.rotateDeg % 360); // 至少转5圈
      // 精确计算目标角度，确保指向区域中心
      const targetDeg = baseDeg + (360 - (winningIndex * itemDeg + itemDeg / 2)) % 360;
      
      this.rotateDeg = targetDeg;
      this.currentPrize = this.prizes[winningIndex];
      
      // 旋转结束后显示结果
      setTimeout(() => {
        this.isSpinning = false;
        this.showResult = true;
      }, 5000);
    },
    
    // 关闭结果弹窗
    closeResult() {
      this.showResult = false;
    },
    
    // 演示用：添加奖项
    addPrize() {
      if (this.prizes.length >= 12) {
        uni.showToast({ title: "最多12个奖项", icon: "none" });
        return;
      }
      
      const newColors = ["#7A77FF", "#FF6AD5", "#60D394", "#AAF683"];
      const newImgUrls = [
        "/static/images/gift1.png",
        "/static/images/gift2.png",
        "/static/images/gift3.png",
        "/static/images/gift4.png"
      ];
      
      const randomIdx = Math.floor(Math.random() * newColors.length);
      this.prizes.push({
        name: `神秘奖品${this.prizes.length + 1}`,
        imgUrl: newImgUrls[randomIdx],
        color: newColors[randomIdx]
      });
    }
  }
};
</script>

<style scoped>
.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.header {
  padding: 30rpx 0;
  text-align: center;
  width: 100%;
  background: linear-gradient(135deg, #ff6b6b, #ff8e71);
  color: white;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.sub-title {
  font-size: 24rpx;
  opacity: 0.9;
}

/* 轮盘区域 */
.lottery-wrapper {
  position: relative;
  width: 680rpx;
  height: 680rpx;
  margin-bottom: 40rpx;
}

.wheel-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.lottery-wheel {
  width: calc(100% - 30rpx);
  height: calc(100% - 30rpx);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin: 15rpx;
  z-index: 2;
}

/* 关键：平均分配的扇形区域 */
.lottery-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: center bottom;
}

/* 分隔线 */
.item-splitter {
  position: absolute;
  width: 2rpx;
  height: 50%;
  top: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  transform-origin: bottom center;
}

/* 奖品内容容器 */
.prize-content {
  position: absolute;
  width: 100%;
  top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center;
}

/* 奖品图片 */
.prize-img {
  margin-bottom: 10rpx;
  border-radius: 8rpx;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10rpx;
}

/* 奖品名称 */
.prize-name {
  font-size: 24rpx;
  color: white;
  font-weight: bold;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* 指针样式 */
.pointer-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 140rpx;
  height: 140rpx;
}

.pointer {
  width: 100%;
  height: 100%;
  background-image: url('/static/images/pointer.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: center 35%;
}

.shaking {
  animation: shake 1s infinite ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* 控制区 */
.lottery-controls {
  width: 680rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.draw-count {
  font-size: 28rpx;
  color: #333;
}

.count {
  color: #ff6b6b;
  font-weight: bold;
  font-size: 32rpx;
  margin: 0 10rpx;
}

.add-btn {
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #4ecdc4;
  color: white;
  border-radius: 35rpx;
  font-size: 26rpx;
}

/* 结果弹窗 */
.result-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 500rpx;
  background-color: white;
  border-radius: 30rpx;
  padding: 40rpx;
  text-align: center;
  box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.2);
  animation: popup 0.3s ease-out;
}

.result-img {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto 30rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ff6b6b;
  color: white;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* 动画效果 */
@keyframes popup {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
</style>